import 'package:flutter/material.dart';
import 'package:flutter_bilibili/core/hi_state.dart';
import 'package:flutter_bilibili/mock/home_data.dart';
import 'package:flutter_bilibili/mock/user_data.dart';
import 'package:flutter_bilibili/pages/home_tab_page.dart';
import 'package:flutter_bilibili/widget/hi_navigation_bar.dart';
import 'package:flutter_bilibili/widget/hi_tab.dart';

class HomePage extends StatefulWidget {
  final VoidCallback? toProfilePage;

  const HomePage({super.key, this.toProfilePage});

  @override
  HiState<HomePage> createState() => _HomePageState();
}

// 这里继承HiState类，在HiState类中拦截异步数据相关的页面异常问题
class _HomePageState extends HiState<HomePage> with TickerProviderStateMixin {
  List<String> tabList = tabs_text;
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: tabList.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        HiNavigationBar(
          child: _appBar(widget.toProfilePage),
        ),
        Container(
          color: Colors.white,
          child: _tabBar(),
        ),
        Flexible(
          child: TabBarView(
            controller: _tabController,
            children: tabList.map((tab) {
              return HomeTabPage(name: tab);
            }).toList(),
          ),
        )
      ],
    );
  }

  /// tabBar区域组件
  _tabBar() {
    List<Widget> tabs = tabList.map((tab) {
      return Tab(text: tab);
    }).toList();

    return HiTab(
      tabs,
      controller: _tabController,
    );
  }

  /// 顶部搜索区域组件
  _appBar(VoidCallback? toProfilePage) {
    return Padding(
      padding: const EdgeInsets.only(left: 15, right: 15),
      child: Row(
        children: [
          InkWell(
            onTap: () {
              if (toProfilePage != null) toProfilePage();
            },
            child: ClipRRect(
              borderRadius: BorderRadius.circular(23),
              child: Image(
                image: AssetImage(user['headImg']),
                height: 46,
                width: 46,
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: 15, right: 15),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(16),
                child: Container(
                  padding: const EdgeInsets.only(left: 10),
                  height: 32,
                  alignment: Alignment.centerLeft,
                  decoration: BoxDecoration(color: Colors.grey[100]),
                  child: const Icon(
                    Icons.search,
                    color: Colors.grey,
                  ),
                ),
              ),
            ),
          ),
          const Icon(
            Icons.explore_outlined,
            color: Colors.grey,
          ),
          const Padding(
            padding: EdgeInsets.only(left: 10),
            child: Icon(
              Icons.mail_outline,
              color: Colors.grey,
            ),
          )
        ],
      ),
    );
  }
}
